<div class="module-content module-vertical">
    <div class="module-header">
        <div class="module-header-title">
            <nz-breadcrumb>
                <nz-breadcrumb-item>
                    销售产品
                </nz-breadcrumb-item>
            </nz-breadcrumb>
        </div>
    </div>
    <div class="module-body">
        <div class="panel panel-grid" style="padding: 10px; box-shadow: none;">
            <div class="panel-heading" style="display: grid; grid-template-columns: 1fr;">
                <div class="search-container">
                 
                    <nz-form-item style="margin-bottom: 10px;">
                        <nz-form-label [nzSpan]="2">产品大类</nz-form-label>
                        <nz-form-control [nzSpan]="22">
                            <nz-radio-group name="catalog" [(ngModel)]="option.catalog" nzButtonStyle="solid" (ngModelChange)="activeType1()">
                                <label nz-radio-button nzValue="all">全部</label>
                                <label nz-radio-button *ngFor="let t of option.catalogs" [nzValue]="t.code" >{{t.name}}</label>
                            </nz-radio-group>
                        </nz-form-control>
                    </nz-form-item>

                    <nz-form-item style="margin-bottom: 10px;" *ngIf="option.catalog !== 'all'">
                        <nz-form-label [nzSpan]="2">产品小类</nz-form-label>
                        <nz-form-control [nzSpan]="22">
                            <nz-radio-group name="category" [(ngModel)]="option.category" nzButtonStyle="solid" (ngModelChange)="activeType2()">
                                <label nz-radio-button nzValue="all">全部</label>
                                <label nz-radio-button *ngFor="let t of option.categories" [nzValue]="t.code" >{{t.name}}</label>
                            </nz-radio-group>
                        </nz-form-control>
                    </nz-form-item>
                    
                    <div class="operate">
                        <nz-input-group [nzSuffix]="suffixIconSearch">
                            <input type="text" nz-input placeholder="搜索" name="keyword" [(ngModel)]="option.keyword" (ngModelChange)="filter()"/>
                        </nz-input-group>
                        <ng-template #suffixIconSearch>
                            <i nz-icon nzType="search"></i>
                        </ng-template>
                        <button nz-button nzType="primary" nz-tooltip nzTitle="购物车" (click)="cartDrawer.show()">
                            <i nz-icon nzType="shopping"></i>
                        </button>
                    </div>
                </div>
            </div>
            <div class="panel-body" style="min-width: 800px; padding: 10px;">
                <nz-empty *ngIf="products.length === 0"></nz-empty>
                <div class="card-container">
                    <div class="card" *ngFor="let product of products">
                        <img class="card-image img-responsive" [src]="product.pictures && product.pictures.length > 0 ? configService.api.download_api + '/' + product.pictures[0].auto_name : 'assets/img/default/dummy.png'" />
                        <div class="card-text">
                            <span class="card-name">{{product.name}}</span>
                            <span class="card-code text-primary">编码 {{product.code}}</span>
                            <span class="card-amount">库存 {{product.amount}}</span>
                            <span class="card-price text-danger">{{product.price}}</span>
                            <div class="card-button"><button nz-button nzType="primary" nzSize="small" (click)="sell(product)">销售</button></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<app-cart #cartDrawer></app-cart>

